<template>
  <view id="detail">
      <!-- <uni-nav-bar left-icon="arrowleft" :fixed='true'   @clickLeft="back" >

                
            <view style="display: flex; flex: 1;align-items: center;justify-content: center;font-weight: bold;width: 100%;">
                   {{detailObj.service_name}}
            </view>
      </uni-nav-bar> -->

      <view class="banner">
            <uni-swiper-dot :info="detailObj.banner" :current="current"  field="content">
                <swiper class="swiper-box" @change="change" :autoplay='true' :interval='5000'>
                    <swiper-item v-for="(item, index) in detailObj.banner" :key="index">
                        <view :class="item.colorClass" class="swiper-item">
                            <image class="image" :src="item.imgurl" mode="aspectFill" />
                        </view>
                    </swiper-item>
                </swiper>
            </uni-swiper-dot>
      </view>

      <view class="part1">
          <view class="title">
              {{detailObj.service_name}}
          </view>
          <view class="rateAnds">
              <uni-rate v-if="detailObj&&detailObj.scour>=0" :disabled="true" :value="detailObj.scour" :size="14" />
              <view class="vajra">已成交：{{detailObj.sell}}</view>
          </view>
          
      </view>

      <view class="part2" v-if="detailObj&&detailObj.specs&&detailObj.specs.length>0">
          <view class="title">
              服务规格
          </view>
          <scroll-view class="scroll-view_H" scroll-x="true" :scroll-top='scrollTop' @scroll="scroll" scroll-left="0">
                    <view class="cont">
                        <view v-for="(item,i) in detailObj.specs" :key="i" class="cont-list" :class="{'active':nowGuige==i}" @click="chooseGuige(item,i)"> 
                            <view class="textone">{{item.specs_name}}</view>
                            <view>现价:￥{{item.specs_yuan}}</view>
                            <view>原价:￥{{item.specs_price}}</view>
                        </view>
                    </view>
        </scroll-view>
      </view>

      <view class="part3">
          <view class="title">
              <view :class="{'active':nowTogg==1}" @click="toggle(1)">
                  内容详情
              </view>
              <view @click="toggle(2)" :class="{'active':nowTogg==2}">
                  用户评价
              </view>
          </view>
          <view class="cont">
              <view v-show="nowTogg==1" class="contDetail" style="text-align:center">
                  <!-- <img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" alt="商品详情图片">
                    <img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg" alt="商品详情图片"> -->
                    <img :src="detailObj.detail" alt="商品详情图片" v-if="detailObj&&detailObj.detail.length>0">
                    <text v-else>暂无内容详情</text>
                    <view class="bottom" v-if="detailObj&&detailObj.detail.length>1">
                        到底啦~
                    </view>
              </view>
              <view v-show="nowTogg==2">
                  <comment :list="detailObj&&detailObj.evaluate" />
                  <view class="bottom" v-if="detailObj&&detailObj.evaluate.length>5">
                        到底啦~
                    </view>
              </view>
          </view>
          
      </view>

      <view class="btnBox">
          <view class="btn" @click="goMakeServe">下一步</view>
      </view>
  </view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
import uniRate from '@/components/uni-rate/uni-rate.vue'
import comment from '@/components/comment/comment.vue'
export default {
    components: {
        uniNavBar,
        uniSwiperDot,
        uniRate,
        comment
    },   
    data(){
        return{
            current:0,
            scrollTop: 0,
            old: {
                scrollTop: 0
            },
            nowGuige:0,
            nowTogg:1,
            service_id:'',
            bz:0,
            psid:"",//规格id
            detailObj:{
                detail:[],
                specs:[],
                evaluate:[]

            },//详情对象
            oid:null,
            uid:null,
            qu_id:null,
            od_id:null,
            isChangeServer:0,
            parms:''
        }
    },
    onLoad(options){
        this.service_id = options.service_id
        this.getServeDetail(options)
        this.bz= options.bz
        if(options.oid&&options.oid!='null'){
            this.oid = options.oid
            this.uid = options.uid
            this.qu_id = options.qu_id
            this.od_id=options.od_id
            uni.setNavigationBarTitle({
					title:'编辑订单(2/3)'
            })
            if(options.parms){
                this.parms = options.parms
                this.psid = options.psid
            }
            

        }
    },
    methods:{
        getServeDetail(parms){//获取服务详情信息
				this.$store.dispatch('serveDetail',{
					service_id:parms.service_id
				}).then(res=>{
                    //console.log('服务信息',res)
                    if(res.code==1){
                        this.serverName = res.data.service_name;
                        this.scour = res.data.scour
                        if(res.data.specs.length>0){
                            // this.psid = res.data.specs[0]['psid']
                            if(this.psid){
                                res.data.specs.map((item,i)=>{
                                    if(this.psid == item.psid){
                                        this.nowGuige = i;
                                    }
                                })
                            }else{
                                this.psid = res.data.specs[0]['psid']
                            }
                            
                        }
                        this.detailObj = res.data
                        // console.log(this.detailObj)
                    }
				})
		},
        back(){
            history.back()
        },
        change(e) {//轮播图
            this.current = e.detail.current
        },
        scroll: function(e) {
          
            this.old.scrollTop = e.detail.scrollTop
        },
        chooseGuige(item,i){
            //this.nowGuige = this.nowGuige==i?-1:-i;
            this.nowGuige =i;
            this.psid = this.nowGuige==-1?'':item.psid;
           
        },
        toggle(i){
            this.nowTogg = i;
        },
        goMakeServe(){//前往预约服务页面 
            if(this.$store.getters.uid){
                uni.getStorage({
                    key: 'userInfo',
                    success: (res) =>{
                        if(res.data){
                            let info = res.data
                            console.log(info)
                            uni.navigateTo({
                                 url:`/pages/order/createOrder/create3?service_id=${this.service_id}&od_id=${this.od_id}&psid=${this.psid}&bz=${this.bz}&oid=${this.oid}&uid=${this.uid}&qu_id=${this.qu_id}&parms=${this.parms}`,
                                animationType: 'pop-in',
                                animationDuration: 200
                            })
                        }else{
                            
                        }
                    }
                });
            }else{
                    uni.showModal({
                        title: '未登录',
                        content: '请前往登录！',
                        success: function (res) {
                            if (res.confirm) {
                                console.log('用户点击确定');
                                uni.navigateTo({
                                    url:"/pages/login/index"
                                })
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });
            }
            
        }
    } 

}
</script>

<style lang="scss" scoped>
#detail{
     .banner{
        .swiper-box {
            height: 440rpx;
        }
        .swiper-item {
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #999;
            color: #fff;
        }
        .image {
            width: 750rpx;
            height: 440rpx;
        }
  }
  .part1{
      background: #fff;
      padding: 20rpx;
      box-sizing: border-box;
      .title{
            font-weight: bold;
            font-size: 30rpx;
            color: #101010;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            line-height: 40rpx;    
            max-height: 40rpx;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
      }
      .rateAnds{
          margin: 20rpx 0 0 0 ;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .vajra{
              line-height: 40rpx;
              font-size: #939393;
              font-size: 28rpx;
          }
      }
  }
  .part2{
      margin-top: 20rpx;
      background: #fff;
      padding: 20rpx;
      .title{
          font-size: 30rpx;
          font-weight: bold;
          text-align: center;
          position: relative;
          &:before{
              content:"";
              height: 1px;
              width: 100rpx;
              background: #bbb;
              display: inline-block;
              position: absolute;
              top: 50%;
              margin-left: -110rpx;
          }
          &:after{
              content:"";
              height: 1px;
              width: 90rpx;
              background: #bbb;
              display: inline-block;
              position: absolute;
              top: 50%;
              margin-left: 10rpx;
          }
      }
      .scroll-view_H{
          margin-top: 20rpx;
            width: 100%;
            // flex-direction: row;
            
            .cont{
                 display: flex;
                justify-content: start;
                flex-wrap: nowrap;
                box-sizing: border-box;
                width: 100%;
                .cont-list{
                    flex-shrink: 0;
                    height: 160rpx;
                    width: 280rpx;
                    font-size: 28rpx;
                    border-radius: 8rpx;
                    background: #eee;
                    text-align: center;
                    margin-right: 40rpx;
                    view{
                        line-height: 50rpx;
                        &:nth-of-type(2){
                            font-weight: 550;
                        }
                        &:nth-of-type(3){
                            color: #aaa;
                        }
                        
                    }
                    &.active{
                            background: rgba(255,248,247,1);
                            border: 1px solid rgba(240, 80, 41, 100);
                            view{
                                &:nth-of-type(1){
                                    
                                    color: #f05029;
                                }
                                &:nth-of-type(2){
                                    
                                    color: #f05029;
                            }
                            }
                             
                        }
                }
            }
            
      }
  }
  .part3{
      margin-top: 40rpx;
      padding-bottom: 100rpx;
      .title{
          display: flex;
          justify-content: center;
          view{
              margin: 0 20rpx;
              font-size: 30rpx;
              color: #101010;
              opacity: 0.45;
              &.active{
                  opacity: 1;
                  font-weight: bold;
                  position: relative;
                  &:after{
                      content: "";
                      width: 30px;
                      height: 2px;
                      display: inline-block;
                      background: #14b9c8;
                      position: absolute;
                      bottom: -4px;
                      left: 15px;
                  }
              }
          }
      }
      .cont{
          margin-top: 20rpx;
          .contDetail{
              img{
                  width: 100%;
              }
          }
      }

      .bottom{
          text-align: center;
          color: rgba(16, 16, 16, .6);
          font-size: 28rpx;
      }
  }
  .btnBox{
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      
      width: 100%;
      background: #fff;
      .btn{
        width:440rpx;
        line-height: 80rpx;
        text-align: center;
        color: #fff;
        background: #0077FF;
        border-radius: 8rpx;
        font-size: 28rpx;
        margin: 0 auto;
    }
  }
  
}
</style>